<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布闲置</title>
    <link rel="stylesheet" href="../css/post-goods.css">
    <script src="../js/jquery.mini.js"></script>
</head>

<body>
    <div class="goods-info-box">
        <div class="goods-info-box-inner">
            <h3>发布闲置物品</h3>
            <div class="goods-title ">
                标题：<input type="text" id="title">
            </div>
            <div class="goods-price">
                价格： <input type="text" id="price">
            </div>
            <div class="goods-intro">
                <div class="goods-intro-tip">
                    <div class="jieshao">介绍：</div>
                    <div class="template-btn">模板生成</div>
                    <div class="type-btn">物品分类</div>
                    <div class="type-show"></div>
                    <form>
                        <div class="upload-pic-btn">上传图片</div>
                        <input type="file" id="file" style="display: none;">
                    </form>
                </div>
            </div><textarea name="" id="intro" cols="90" rows="15"></textarea>
        </div>
        <div class="goods-address">
            发货地址： <input type="text" id="address">
        </div>
        <div class="goods-img"></div>
        <div class="post-btn">发布</div>
    </div>
    <div class="type-display-box">
        <div class="tag-display-inner">
            <div class="tag-box-top">类别
                <img src="../icon/关闭.png" class="tag-box-close">
            </div>
            <div class="tag-show-box">
            </div>
            <div class="tag-display">
                <div class="tag-type">
                    <ul class="tag-type-box">
                    </ul>
                </div>
                <div class="tag-content-show">

                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var type_name;
    var goods_path;
    $('.type-display-box').hide();
    $('.type-show').hide();
    $('.type-btn').click(function () {
        $('.type-display-box').show();
        $.ajax({
            url: "/goodstypes/groups",
            type: "get",
            datatype: "json",
            success: function (result) {
                if (result.state === 200) {
                    $('.tag-type-box').empty();
                    var data = result.data;
                    for (var i = 1; i < data.length; i++) {
                        var hmtl = "";
                        html = " <li class='tag-type-items'>" + data[i] + "</li>";
                        $('.tag-type-box').append(html);
                    }
                } else {
                    alert("类别加载错误");
                }
            }
        })
    })
    $('.tag-box-close').click(function () {
        $('.type-display-box').hide();
    });
    $('.template-btn').click(function () {
        console.log('click');
        $('#intro').text("品牌：\n容量/尺码：\n瑕疵：\n成色：\n ");
    });
    $('.tag-type-box').on('click', '.tag-type-items', function () {
        var groupname = $(this).text();
        // alert(groupname);
        $.ajax({
            url: "/goodstypes/typenames",
            type: "post",
            data: { "groupname": groupname },
            datatype: "json",
            success: function (result) {
                if (result.state === 200) {
                    var data = result.data;
                    console.log(data.length);
                    $('.tag-content-show').empty();
                    for (var i = 0; i < data.length; i++) {
                        console.log(data[i].typeName);
                        var html = "<div class='tag-each'" + "type_id=" + data[i].typeId + ">" + data[i].typeName + "</div>";
                        $('.tag-content-show').append(html);

                    }
                } else {
                    alert("加载具体的类别失败！");
                }
            },
        })
    });
    $('.tag-content-show').on('click', '.tag-each', function () {
        $('.type-show').show();
        $('.type-show').text($(this).text());
        type_name = $(this).text();
    });
    $('.upload-pic-btn').click(function () {
        $("#file").click();
    });
    $("#file").change(function () {
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            url: "/goods/uploadimg",
            type: "POST",
            data: formData,
            dataType: "json",
            processData: false,	// 使数据不做处理
            contentType: false,		// 不要设置Content-Type请求头
            success: function (result) {
                alert("图片上传成功");
                if (result.state === 200) {
                    // alert("goods_path" + result.data);
                    goods_path = "/pic/goods-pic/" + result.data;
                } else {
                    alert("图片上传失败！");
                }
            },
            error: function (result) {
                alert(reult.state);
            }
        });
    });
    $('.post-btn').click(function () {
        // console.log("click发布");
        var title = $('#title').val();
        var price = $('#price').val();
        var intro = $('#intro').val();
        var address = $('#address').val();
        var json = JSON.stringify({ "goodsName": title, "goodsTypeName": type_name, "originalPrice": price, "goodsIntro": intro, "postAddress": address, "goodsImgPath": goods_path });
        console.log(json);
        alert(json);
        $.ajax({
            url: "/goods/create",
            type: "post",
            data: json,
            dataType: "json",
            contentType: "application/json",
            success: function (result) {
                if (result.state === 200) {
                    alert("闲置物品发布成功！");
                    window.location.href = "goods.html?goods_id=" + result.data;
                } else {
                    alert("闲置物品发布失败！");
                }
            }
        });
    });
</script>

</html>